<template>
  <div class="container" style="width:100%;">
    <div class="title">课程公告</div>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item
        :name="index"
        v-for="(item, index) in announce"
        :key="index"
      >
        <template slot="title">
          <span style="font-size:13px; margin-left:15px">{{ item.title }}</span>
          <span style="margin-left:100px; font-size:11px; color: #909399">{{
            item.publishDate
          }}</span>
        </template>
        <div style="margin-left:15px">{{ item.content }}</div>
      </el-collapse-item>
    </el-collapse>
    <el-row>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="announceList.length"
        style="margin-top:10px;margin-left:15px"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
      currentPage: 1,
      announce: [],
      pageSize: 7,
      announceList: [],
    };
  },
  methods: {
    //返回课程通告
    returnCourseAnnounce() {
      let options = { sections: this.$store.state.temp_courseSections };
      this.$http
        .post(this.$api.CourseMonitorGETAnnouncement, options)
        .then((resp) => {
          if (resp.success) {
            this.announceList = resp.data;
            this.handleCurrentChange(this.currentPage);
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
    //处理页数的改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.announce = this.announceList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  mounted() {
    // 挂载时载入当前学生数，看情况要不要
    // this.handleCurrentChange(this.currentPage);
    this.returnCourseAnnounce();
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-collapse-item__header {
  color: #333333;
  background-color: rgba(242, 242, 242, 1);
  height: 29px;
  width: 100%;
}

.el-collapse-item:nth-child(n + 1) {
  margin-top: 5px;
  border: 1px solid rgba(204, 204, 204, 1);
  width: 480px;
  padding: 0;
}

.el-collapse {
  width: 400px;
  border: 0;
  text-align: left;
  margin-left: 30px;
  margin-top: 15px;
}

/deep/ .el-collapse-item__content {
  border-top: 1px solid rgba(204, 204, 204, 1);
}

// 分页右边“共多少页”
/deep/ .el-pagination__total {
  margin-right: 60px;
}

// 标题
.title {
  text-align: left;
  margin-left: 30px;
  font-size: 14px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  color: #333333;
}
</style>
